<!--
    用户管理->评价记录
-->
<template>
  <div class="userConsume">
     <el-dropdown-item @click.native="handleTag">评价记录</el-dropdown-item>
      <el-dialog width="1100px" v-dialogDrag destroy-on-close :visible.sync="consumeVisible" :append-to-body='true' @close="consumeVisible = false">
          <template v-slot:title>
              <p style="font-size: 16px;margin-bottom: 0px;">手机号为<span class="red">{{statusRow.telephone}}</span>用户的评价记录</p>
          </template>
          <el-table :data="evaluateList" style="width: 100%" border :height="600"  v-el-table-infinite-scroll="dialogTableListScroll"  stripe>
            <el-table-column prop="orderId" label="订单号" align="center"></el-table-column>
            <el-table-column prop="orderTypeName" label="订单类型" align="center"></el-table-column>
            <el-table-column prop="name" label="商品/门店名称" align="center">
              <template #default="scope">
                {{scope.row.storeName}}
              </template>
            </el-table-column>
            <el-table-column prop="actualPay" label="实付金额" align="center"></el-table-column>
            <el-table-column prop="goodsEvaluate" label="评价信息" width="200" align="center">
              <template #default="scope">
                <div class="rateBox">
                  <p class="d-flex align-center"><span class="rateText">商品打分</span><el-rate v-model="scope.row.scoreLevelNew" :score-template="scope.row.scoreLevel+''" allow-half disabled show-score text-color="#ff9900"></el-rate></p>
                  <p class="d-flex align-center"><span class="rateText">物流服务</span><el-rate v-model="scope.row.logisticsLevelNew" :score-template="scope.row.logisticsLevel+''" allow-half disabled show-score text-color="#ff9900"></el-rate></p>
                  <p class="d-flex align-center"><span class="rateText">服务态度</span><el-rate v-model="scope.row.serviceLevelNew" :score-template="scope.row.serviceLevel+''" allow-half disabled show-score text-color="#ff9900"></el-rate></p>
                  <p class="d-flex align-center"><span class="rateText">评价内容:</span>
                  <span class="content"><el-tooltip placement="top" :content="scope.row.goodsEvaluate"><span>{{scope.row.goodsEvaluate}}</span></el-tooltip></span></p>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="name" label="评价时间" align="center">
              <template slot-scope="scope">
                <span>{{ parseTime(scope.row.createTime) }}</span>
              </template>
            </el-table-column>
            <p slot="append" style="text-align:center; line-height:48px;" v-if="tableLoading">正在加载...</p>
            <p slot="append" style="text-align:center; line-height:48px;" v-if="tableIsMore">没有更多了</p>
          </el-table>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="consumeVisible = false" size="small" >关 闭</el-button>
          </div>
       </el-dialog>
  </div>


</template>

<script>
  import { getEvaluation } from '@/api/getData';
  import elTableInfiniteScroll from 'el-table-infinite-scroll';
 export default {
   name: 'userConsume',
   directives: {
     'el-table-infinite-scroll': elTableInfiniteScroll
   },
   props: ['id','statusRow'],
   data(){
     return{
       consumeVisible:false,
       userLoading:false,
       evaluateList:[],

       pageNum:1,
       pageSize:20,
       total:0,
       isNextPage:true,
       tableLoading:false,//弹框表格 正在加载
       tableIsMore:false,//弹框表格 没有更多
     }
   },

   mounted() {
   },
   methods:{
      handleTag(){
        this.evaluateList = [];
        this.pageNum= 1;
        this.consumeVisible = true;
        this.dataInfo();
      },
      async dataInfo(){
        try {
          let data = {
             pageNum:this.pageNum,
             pageSize:this.pageSize,
            customerId:this.id
          }
          this.tableLoading = true;
          this.tableIsMore = false;
          this.isNextPage = true;
          const result = await getEvaluation(data);
          if (result.code == 200) {
             let data = result.rows;
             data.map(item=>{
               item.scoreLevelNew = (item.scoreLevel/2);
               item.logisticsLevelNew = (item.logisticsLevel/2);
               item.serviceLevelNew = (item.serviceLevel/2);
             })
             this.evaluateList = this.evaluateList.concat(data)
              if(result.rows.length<20 && (this.pageNum != '1')){
                  this.tableIsMore = true;
              }
              if(result.rows.length<20){/*判断是否有下一页*/
                this.isNextPage = false;
              }else{

                this.isNextPage = true;
              }
          } else {
            this.$message.error(result.msg);
          }
          this.$nextTick(()=>{
            this.tableLoading = false
          })
        } catch (err) {
           this.loading = false;
          console.log(err)
        }
      },
      dialogTableListScroll(){/*弹框列表滚动*/
        if(this.isNextPage && !this.tableLoading){
          this.pageNum++;
          this.dataInfo();
        }
      },
   }
 }
</script>

<style lang="scss" scoped>
  .rateBox /deep/ .el-rate__icon{
    margin-right: 0px;
  }
  .rateBox>p{
    margin: 0px;
  }
  .rateBox>p> /deep/ .el-rate{
    height:25px;
    line-height:25px;
    display:flex;
  }
  .rateBox>p> /deep/ .el-rate .el-rate__item{
    display:flex;
    align-items: center;
  }
  .rateBox .rateText{
    width:60px;
  }
  .rateBox .content{
    display: flex;
  }
  .rateBox .el-tooltip{
        width: 100px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        display: inline-block;
  }
  .rateBox>p{
    height:18px
  }
</style>
